<html>

<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
        .con {
            width: 100%;
            height: 100%;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #e60000;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: #2116be;
        }

        .aside1 {
            width: 20%;
            height: 700px;
            background-color: #be1656;
            float: left;
        }

        .main1 {
            width: 80%;
            height: 700px;
            background-color: #16be2c;
            float: left;
        }

        .topdiv {
            height: 50%;
            margin-bottom: 8px;
            background-color: chartreuse;
        }

        .botdic {
            height: 50%;
            background-color: cyan;

        }

        .botleft {
            width: 50%;
            height: 320px;
            background-color: #000701;
            float: left;
        }

        .botright {
            width: 50%;
            height: 320px;
            background-color: #e60000;
            float: left;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: #e4f500;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="con">
        <header class="header">页眉</header>
        <nav class="nav">导航</nav>
        <div class="father">
            <aside class="aside1">左侧栏</aside>
            <section class="main1">
                <div class="topdiv">
                    主体内容
                </div>
                <div class="botdiv">
                    <div class="botleft">
                        主体内容
                    </div>
                    <div class="botright">
                        主体内容
                    </div>
                </div>
            </section>
        </div>
        <footer class="footer">页脚</footer>
    </div>
</body>

</html>